<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
	import {memberChartTab
	} from '@/data'
	import * as echarts from 'echarts'
	import {
		dateTypes
	} from '@/utils'
	import {
		staffListData
  } from '@/data'
  import {reqStaffDetailChart } from '@/api'
	import MyIcon from '@/components/my-icon/index.vue'
	import {
		ref,
		onMounted
	} from 'vue'
const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
	reqQrTableData()
}
const chooseDialogue = ref(null)

const queryForm = ref({
    "type":1,
    "date_type":"day",
    "ktime":"",
    "dtime":"",
    "staffs":[]
})
const clear = () =>{
  selfTime.value = []
  queryForm.value = Object.assign(queryForm.value,{
    "type":1,
    "date_type":"day",
    "ktime":"",
    "dtime":"",
})
  reqQrChartData()
}

const selfTime = ref([])
const dateTypeList = ref([])
dateTypeList.value = dateTypes
const staffList = ref([])
staffList.value = staffListData

const show = (ids)=>{
	queryForm.value.staffs = [ids]
	reqQrChartData()
}
const tableData = ref([])
const reqQrChartData = async() =>{
	if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	if (staffData.value.length>0) {
		queryForm.value.staff_id = []
		staffData.value.forEach(item=>{
			queryForm.value.staff_id.push(item.id)
		})
	}
	const r = await reqStaffDetailChart(queryForm.value)
	let xData = []
	let yData = []
	if(r){
    tableData.value = r.data
		r.data.forEach(item=>{
      xData.push(item.date)
      if (queryForm.value.type==1){
        yData.push(item.chat_cnt)
      }else if (queryForm.value.type==2){
        yData.push(item.message_cnt)
      }else if (queryForm.value.type==7){
        yData.push(item.reply_percentage)
      }else if (queryForm.value.type==8){
        yData.push(item.avg_reply_time)
      }
			
		})
		
	}
	let myChart = echarts.init(document.getElementById('myChart123'))
	// 绘制图表
	myChart.setOption({
		xAxis: {
			data: xData
		},
    yAxis: {},
    tooltip: {
			trigger: 'axis',
		},
		series: [
			{
				name: queryForm.value.type==1?'聊天总数':queryForm.value.type==2?'发送消息数':queryForm.value.type==7?'已回复聊天占比':'平均首次回复时长',
				type: 'line',
				data: yData,
				itemStyle: {
					borderRadius: [0, 5, 5, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				}
				// areaStyle:{
				// 	color:'#1890ff',
				// },
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}
}
defineExpose({
	show
})
onMounted(async() => {
	
	
})
</script>

<template>
<el-card class="app-gap-block-top">
	<div>
		<div class="app-container">
			<div class="table-title app-flex-left">
				趋势图
			</div>
			<div class="app-gap-block-top">
				<div>
					<el-radio-group @change="reqQrChartData" v-model="queryForm.type" size="large">
						<el-radio-button :label="item.id" v-for="(item,index) in memberChartTab" :key="index">{{item.title}}</el-radio-button>
					</el-radio-group>
				</div>
				<div class="app-gap-block-top app-flex-2">
				<div class="app-flex-left">
					<el-select @change="reqQrChartData" v-model="queryForm.date_type" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in dateTypeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span class="app-gap-words-left app-select-right">自定义：</span>
					<el-date-picker @change="reqQrChartData" class="app-date-picker" v-model="selfTime" type="daterange" range-separator="~"
						start-placeholder="开始日期" end-placeholder="结束日期" size="large" />
					</div>
          
					<el-button class="app-btn" @click="clear">重置</el-button>

				</div>
				<div class="app-gap-block-top">
					<div id="myChart123" :style="{ width: '100%', height: '550px' }"></div>
				</div>
			</div>

      	<el-table class="app-gap-block-top" :data="tableData" style="width: 100%">
							<el-table-column prop="date" label="日期" align="left" />
              	<el-table-column prop="chat_cnt" label="聊天总数" align="left" />
                	<el-table-column prop="message_cnt" label="发送消息数" align="left" />
                  	<el-table-column prop="reply_percentage" label="已回复聊天占比" align="left" />
                    	<el-table-column prop="avg_reply_time" label="平均首次回复时长" align="right" />

				</el-table>
		</div>
		<div></div>
	</div>
  </el-card>
</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>